<template>
	<view class="box">
		<uNavbar title="碎片列表" ></uNavbar>
		<view class="tabss flex_ld">
			<view class="tabss_box" v-for="(item,index) in list1" :key="index">
				<text :class="ids == item.id?'active':''" @click="changeTabs(item.id)">{{item.name}}</text>
			</view>
		</view>
		<view class="blind_list flex_Z" v-for="item in splist " :key="item.id">
			<view class="blind_list_top flex_ld">
				<text class="f30 c3">{{item.good.prop_name}}   X{{item.number}}</text>
				<!-- <text class="f26 c4">编号:4415471148</text> -->
			</view>
			<view class="blind_list_btm flex_ld">
				<text class="f26 c4">{{item.create_time}} </text>
				<text class="use_btn" v-if="item.status==0" @click="openBlindBox(item.prop_id,item.number)">挂售</text>
				<text class="use_btn"  v-if="item.status==4" @click="ids=item.prop_id,tipShow2=true">取消挂售</text>
			</view>
		</view>
		<noDatas  :xxxList="splist" :status="status"></noDatas>
		<view class="empty3">
			
		</view>
		<u-popup :show="tipShow2" mode="center" @close="tipShow2 = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">确定要取消挂售吗</text>
		
				<view class="prompt_ntm" @click="canel">
					<text>确定</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
		<view class="btn" @click="gohc()" >
			去合成
		</view>

	</view>
</template>

<script>
	import {fragmentList,batchCancelRent} from "../../api/object.js"
	export default {
		data() {
			return {
				gifShow:false,
				tipShow: false, //提示弹窗
				ids: 0,
				list1: [{
						name: '未挂售', 
						id:0
					}, {
						name: '挂售中',
						id:1
					}
				],
				id:"",
				page: 1,
				size: 20,
				status: 'loadmore',
				splist:[],
				tipShow2:false,
				ids:""
			}
		},
		onShow() {
			this.getlist()
		},
		onLoad(options) {
			this.id=options.id
			this.getlist()
		},
		methods: {
			gohc(){
				if(this.hcid>0){
					uni.navigateTo({
						url:"/pagesMy/debris/debrisdetail?id="+this.hcid
					})
				}
				if(this.hcid==0){
					uni.navigateTo({
						url:"/pagesMy/debris/debrislist"
					})
				}
			},
			canel(){
				batchCancelRent({
					prop_id:this.ids
				}).then(res=>{
					if(res.code==1){
						// this.
						this.tipShow2=false
						this.page=1
						this.getlist()
					}
					uni.$u.toast(res.msg)
				})
			},
			getlist(){
				fragmentList({
					goods_id:this.id,
					page:this.page,
					status:this.ids
				}).then(res=>{
					if (res.code == 1) {
						this.hcid=res.data.synthetic_goods_id
						let list = res.data.list.data;
						this.splist = this.page == 1 ? list : this.splist.concat(list);
						console.log(this.splist);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			changeTabs(id) {
				this.ids = id
				this.page=1
				this.getlist()
			},
			openBlindBox(id,number){
				uni.navigateTo({
					url:"/pagesMy/debris/debrissell?id="+id+"&number="+number
				})
			}
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getlist()
			}
		
		}
		
	}
</script>

<style scoped lang="scss">
	.box{
		width: 750rpx;
		position: relative;
	}
	.btn{
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 410rpx 410rpx 410rpx 410rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		transform: translate(-50%);
		z-index: 100;
	}
	.tabss {
		display: flex;
		justify-content: space-around;
		width: 700rpx;
		margin: 40rpx auto 56rpx;
	}
	.tabss_box{
		color: #A6A5AF;
		font-size: 32rpx;
	}
	.active{
		color: #333 !important;
	}
	.blind_list{
		display: flex;
		justify-content: space-evenly;
		width: 690rpx;
		height: 164rpx;
		background:#F2EFEC;
		border-radius: 16rpx;
		margin: 0 auto 30rpx;
	}
	.blind_list_top{
		padding: 0 24rpx;
	}
	.blind_list_btm{
		padding: 0 24rpx;
	}
	.use_btn{
		width: 124rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		background:#A68A64;
		border-radius: 40rpx;
		font-size: 24rpx;
		color: #ffffff;
	}
	.gifImg_box{
		margin-top: 260rpx;
		width: 100%;
	}
	.gifImg{
		width: 300rpx;
		height: 300rpx;
	}
	
	.prompt {
		position: relative;
		width: 600rpx;
		background: #2A2753;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #ffffff;
		padding-top: 30rpx;
		/* background: #ffffff; */
		background: linear-gradient( 180deg, #fa9e97, #fde2e0);
	}
	
	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #333;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}
</style>